<script setup lang="ts">
import { Cell } from '@antv/x6'
import { ImagePicker } from '@yk/components/draw/shapes/components/image-picker'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  cell: Cell | any
}>()

let _cell = toRaw(props.cell)

watch(() => props.cell, () => {
  _cell = toRaw(props.cell)
  init()
})

onMounted(() => {
  init()
})

function init () {
  // -
}

// region TODO 测试
const testValue = ref(1)
function test () {
  _cell.data.dataConfig.updateData(_cell, { value: testValue.value })
}
// endregion

// region TODO 对话框
const dialogModel = ref(false)
type BindConfigType = { operate: string, value: number, href: string }
const bindConfig = ref<BindConfigType[]>([])
function showDialog () {
  bindConfig.value = ObjectUtil.copy(props.cell.data.dataConfig.bindConfig)
  dialogModel.value = true
}
// endregion

// region TODO 选择图片
function pickerImage (item: BindConfigType) {
  ImagePicker.picker().then(function (e) {
    if (e !== null) {
      item.href = e
    }
  })
}
// endregion

// region TODO 新增删除
function addTableItem () {
  bindConfig.value.push({ operate: '', value: null, href: '' })
}
function removeTableItem (index: number) {
  bindConfig.value.splice(index, 1)
}
// endregion

// region TODO 提交保存
function submitHandle () {
  _cell.data.dataConfig.bindConfig = bindConfig.value
  props.cell.data.dataConfig.defaultValue({ cell: props.cell })
  dialogModel.value = false
}
// endregion

</script>

<template>
  <el-collapse-item title="更多" name="More">
    <el-form-item label="展示规则">
      <el-button @click="showDialog">配置规则</el-button>
      <!--<el-switch v-model="switchState" @change="switchChangeHandle" />-->
    </el-form-item>
    <el-form-item label="测试">
      <div class="d-flex">
        <el-input-number v-model="testValue" />
        <el-button class="ml-3" type="primary" plain @click="test">测试</el-button>
      </div>
    </el-form-item>
  </el-collapse-item>
  <el-dialog v-model="dialogModel" title="规则配置" width="450px" :close-on-click-modal="false">
    <div style="margin: -12px 0;">
      <el-table :data="bindConfig">
        <el-table-column label="逻辑" align="center">
          <template #default="scope">
            <el-select v-model="scope.row.operate">
              <el-option label="等于" value="==" />
              <el-option label="不等于" value="!=" />
              <el-option label="大于" value=">" />
              <el-option label="小于" value="<" />
              <el-option label="大于等于" value=">=" />
              <el-option label="小于等于" value="<=" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="值" align="center">
          <template #default="scope">
            <el-input-number v-model="scope.row.value" class="el-c-input-pure" />
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template #default="scope">
            <div class="config-list-img bor-base cursor-pointer d-flex-center w-100" @click="pickerImage(scope.row)">
              <img
                v-if="scope.row.href" :src="scope.row.href"
                alt=""
                class="config-list-img"
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="50">
          <template #default="scope">
            <el-link type="danger" @click="removeTableItem(scope.$index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-12 d-flex-between-center">
        <p class="text-color-placeholder">逻辑重合时，取首个满足条件的配置</p>
        <el-button type="primary" plain @click="addTableItem">添加条件</el-button>
      </div>
    </div>
    <template #footer>
      <el-button size="default" @click="dialogModel = false">取消</el-button>
      <el-button type="primary" size="default" @click="submitHandle">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.config-list-img {
  height: 40px;
  object-fit: contain;
}
</style>
